<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>朋友圈发布</title>
	<link rel="stylesheet" type="text/css" href="/qy/css/public.css">
	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
	<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
	<style type="text/css">
		html{
			height: 100%;
		}
		body{
			height: 100%;
		}
		.friendPublish_container{
			height: 100%;
		}
		.friendPublish_content{
			height: 100%;
			position: relative;
		}
		.friendPublish_mainTextarea_container{
			display: flex;
		}
		.friendPublish_mainTextarea_container textarea{
			flex: 1;
			border: none;
			resize: none;
			height: 114px;
			padding: 10px;
			font-size: 15px;
			color: #353535;
			margin-bottom: 15px;
			font-family: "Microsoft YaHei";
		}
		.friendPublish_mainImg_container{
			position: relative;
			overflow: hidden;
			padding: 5px;
		}
		.friendPublish_mainImg_content{
			width: 88px;
			height: 88px;
			position: relative;
			float: left;
			margin: 10px 5px;
		}
		.friendPublish_mainImg_content img{
			width: 88px;
			height: 88px;
			display: block;
		}
		.friendPublish_mainImg_content svg{
			position: absolute;
			width: 10px;
			height: 10px;
			right: -9px;
			top: -7px;
			background: #eaeaea;
			padding: 5px;
			border-radius: 50%;
			display: block;
			fill: #909090;
		}
		.friendPublish_mainVideoAdd_container{
			width: 84px;
			height: 84px;
			position: relative;
			float: left;
			margin: 10px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #ececec;
		}
		.friendPublish_mainVideoAdd_container svg{
			width: 50px;
			height: 50px;
			display: block;
			fill: #cdcdcd;
		}
		.friendPublish_mainImgAdd_container{
			width: 84px;
			height: 84px;
			position: relative;
			float: left;
			margin: 10px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #ececec;
			cursor: pointer;
		}
		.friendPublish_mainImgAdd_container svg{
			width: 50px;
			height: 50px;
			display: block;
			fill: #cdcdcd;
		}
		.friendPublish_mainVideo_container{
			align-items: flex-end;
			display: flex;
			padding: 0 5px;
		}
		.friendPublish_mainVideo_content{
			margin: 10px 5px;
		}
		.friendPublish_mainLink_container{
			display: flex;
			padding: 10px;
		}
		.friendPublish_mainLink_container input{
			-webkit-appearance: none;
			border: 1px solid #ececec;
			flex: 1;
			font-size: 15px;
			padding: 10px;
			border-radius: 5px;
			color: #666;
			font-family: "Microsoft YaHei";
		}
		.friendPublish_submitButton_container{
			display: flex;
			padding: 0 25px;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 50px;
		}
		.friendPublish_submitButton_container button{
			outline: none;
			-webkit-appearance: none;
			background: #5076b8;
			border: none;
			font-size: 15px;
			color: #fff;
			border-radius: 5px;
			flex: 1;
			padding: 10px;
		}
		.friendPublish_mainVideoImgAdd_container input{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			opacity: 0;
		}
	</style>
</head>
<body>
	<div class="friendPublish_container">
		<div class="friendPublish_content">
			<div class="friendPublish_main_container">
				<!-- 多行文本 -->
				<div class="friendPublish_mainTextarea_container">
					<textarea placeholder="输入想发表的内容" id="writing" name="writing"></textarea>
				</div>
				<!-- 图片 -->
				<div class="friendPublish_mainImg_container">
					<input type="hidden" name="pics" id="pics" value="[]"/>
					<div id="img_box">
						
					</div>
					<!--<div class="friendPublish_mainImg_content">
						<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1354268575,1268995723&fm=26&gp=0.jpg">
						<svg t="1596080052003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3099"><path d="M671.830688 511.699001l319.059377-319.059377c43.945914-43.945914 43.945914-115.583774 0-159.529688-43.945914-43.945914-115.583774-43.945914-159.529688 0l-319.059377 319.059377-319.059377-319.059377c-43.945914-43.945914-115.583774-43.945914-159.529688 0-43.945914 43.945914-43.945914 115.583774 0 159.529688l319.059377 319.059377-319.059377 319.059377c-43.945914 43.945914-43.945914 115.583774 0 159.529688 43.945914 43.945914 115.583774 43.945914 159.529688 0l319.059377-319.059377 319.059377 319.059377c43.945914 43.945914 115.583774 43.945914 159.529688 0 43.945914-43.945914 43.945914-115.583774 0-159.529688L671.830688 511.699001z" p-id="3100"></path></svg>
					</div>
					<div class="friendPublish_mainImg_content">
						<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1354268575,1268995723&fm=26&gp=0.jpg">
						<svg t="1596080052003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3099"><path d="M671.830688 511.699001l319.059377-319.059377c43.945914-43.945914 43.945914-115.583774 0-159.529688-43.945914-43.945914-115.583774-43.945914-159.529688 0l-319.059377 319.059377-319.059377-319.059377c-43.945914-43.945914-115.583774-43.945914-159.529688 0-43.945914 43.945914-43.945914 115.583774 0 159.529688l319.059377 319.059377-319.059377 319.059377c-43.945914 43.945914-43.945914 115.583774 0 159.529688 43.945914 43.945914 115.583774 43.945914 159.529688 0l319.059377-319.059377 319.059377 319.059377c43.945914 43.945914 115.583774 43.945914 159.529688 0 43.945914-43.945914 43.945914-115.583774 0-159.529688L671.830688 511.699001z" p-id="3100"></path></svg>
					</div>-->
					<!-- 添加图片图标 -->
					<div class="friendPublish_mainImgAdd_container friendPublish_mainVideoImgAdd_container">
						<svg t="1596092095450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1991"><path d="M512 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666666V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v597.333334c0 25.6-17.066667 42.666667-42.666667 42.666666z" p-id="1992"></path><path d="M810.666667 554.666667H213.333333c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666667h597.333334c25.6 0 42.666667 17.066667 42.666666 42.666667s-17.066667 42.666667-42.666666 42.666667z" p-id="1993"></path></svg>
						<input type="file" accept="image/png, image/jpeg, image/jpg" id="file" onchange="upload_pic()">
					</div>
				</div>
			</div>
			<div class="friendPublish_submitButton_container">
				<button onclick="publish_pic()">发布</button>
			</div>
		</div>
	</div>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script>
		function publish_pic(){
			var writing = $('#writing').val();
			var pics = $('#pics').val();	
			myAjaxPost(false, true, '', { writing:writing,pics:pics}, function (resp) {
				if (resp.status == 'success'){
					layer.msg(resp.msg);
						setTimeout(function(){
							window.history.back(-1);
						},1000);
				}else{
					layer.msg(resp.msg);
				}
			});
		}
	</script>
	<script type="text/javascript">
		var imgList = [];
		function upload_pic(){
			 var formData = new FormData();
			 formData.append("file",$("#file")[0].files[0]);
			 $.ajax({
				url: "upload_pic.html",
				type: "post",
				data: formData,
				processData: false,
				contentType: false,
				success:function(resp){
					$("#file").val('');
					if(resp.status == 'success'){
						imgList.push(resp.data);
						initImgList();						
					}else{
						tusi(resp.msg)
					}
				}
			 })
		}
		
		function initImgList(){
			var box = $('#img_box');
			box.empty();
			for (var i = 0; i < imgList.length; i++) {
				var html = '';
				html += '<div class="friendPublish_mainImg_content" data-index='+i+'>';
				html += '<img src="'+imgList[i]+'">';
				html += '<svg onclick="picsDelImg(this)" t="1596080052003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3099"><path d="M671.830688 511.699001l319.059377-319.059377c43.945914-43.945914 43.945914-115.583774 0-159.529688-43.945914-43.945914-115.583774-43.945914-159.529688 0l-319.059377 319.059377-319.059377-319.059377c-43.945914-43.945914-115.583774-43.945914-159.529688 0-43.945914 43.945914-43.945914 115.583774 0 159.529688l319.059377 319.059377-319.059377 319.059377c-43.945914 43.945914-43.945914 115.583774 0 159.529688 43.945914 43.945914 115.583774 43.945914 159.529688 0l319.059377-319.059377 319.059377 319.059377c43.945914 43.945914 115.583774 43.945914 159.529688 0 43.945914-43.945914 43.945914-115.583774 0-159.529688L671.830688 511.699001z" p-id="3100"></path></svg>';
				html += '</div>';
				box.append(html);
			}
			$('#pics').val(JSON.stringify(imgList));
		}
		
		function picsDelImg(t){
			var div=$(t).parent();
			var idx=div.attr('data-index');
			imgList.splice(idx, 1);
			initImgList();
		}
	
	</script>
	<script type="text/javascript">
		$('.friendPublish_mainImg_content svg').click(function(){
			$(this).parent().remove();
		})
	</script>
</body>
</html>